<script setup lang="ts">
import { RequestMethod } from '@/api/system/sysapi/ApiModel'
import useBaseModel from '@/composables/system/sysapi/useBaseModel';
import useDialog from '@/hooks/useDialog';
import SysDialog from '@/components/SysDialog/index.vue';
import useApiAddAndEdit from '@/composables/system/sysapi/useApiAddAndEdit';

// 基础数据
const { addModel, rules } = useBaseModel()

// 弹框
const { dialog, onShow, onClose } = useDialog()

// 注册事件
const emit = defineEmits(['save'])

const { onConfirm, show, addApiForm, treeData } = useApiAddAndEdit(dialog, onShow, onClose, addModel, emit)

const props = defineProps<{
    methodData: {
        data: Array<RequestMethod>
    }
}>()

// 暴露方法给外部使用
defineExpose({
    show
})

</script>
<template>
    <SysDialog :title="dialog.title" :width="dialog.width" :height="200" :visible="dialog.visible" @onClose="onClose"
        @onConfirm="onConfirm">
        <template v-slot:content>
            <el-form :model="addModel" ref="addApiForm" :rules="rules" label-width="80px">
                <el-form-item prop="parent_id" label="API分组">
                    <el-tree-select v-model="addModel.parent_id" node-key="id" :data="treeData.data" check-strictly />
                </el-form-item>
                <el-form-item prop="description" label="API描述">
                    <el-input v-model="addModel.description"></el-input>
                </el-form-item>
                <el-form-item prop="path" label="API路径">
                    <el-input v-model="addModel.path"></el-input>
                </el-form-item>
                <el-form-item prop="method" label="API请求">
                    <el-select v-model="addModel.method" placeholder="请选择">
                        <el-option v-for="item in methodData.data" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
    </SysDialog>
</template>
<style lang="scss" scoped>
</style>